<template>
  <div>
    <basic-dialog :visible="visible" min-width="626px"
                  title="网口配置">
      <q-form @submit="onSubmit"
              greedy
              @reset="$emit('close')"
              ref="myForm"
              class="dialog-content block">
        <div style="padding: 20px 20px 0 20px">
          <div class="title">网口信息</div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.collect_ip"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入ip地址',
                       val => val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val) || '请输入合法ip地址']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>IP地址:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-input v-model="form.collect_port"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入设备端口', val => (val && /^\d+$/g.test(val)) || '只能输入数字']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>设备端口:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.collect_cycle"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入采集周期', val => (val && /^\d+$/g.test(val)) || '只能输入数字']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>采集周期(ms):</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>

          <div class="title">文件传输配置</div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.file_ip"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入传输地址',
                       val => val && /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val) || '请输入合法ip地址']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>传输地址:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-input v-model="form.file_port"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入传输端口',
                       val => val && /^([0-9]|[1-9]\d|[1-9]\d{2}|[1-9]\d{3}|[1-5]\d{4}|6[0-4]\d{3}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(val) || '请输入合法端口0~65535']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>传输端口:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-select v-model="form.file_protocol" :options="fileProtocolTypes" outlined dense  options-dense emit-value map-options style="width: 280px"
                    :rules="[val => val !== null && val !== '' || '请选择传输协议']">
                <template v-slot:before>
                  <label class="text-right name label-width"><span class="text-red">*</span>传输协议:</label>
                </template>
              </q-select>
            </div>
            <div class="col">
              <q-input v-model="form.file_username"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[]"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span>用户名:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.file_password"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[]"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                     <span>密码:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="title">在线加工配置</div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.dnc_port"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入采集端口']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>采集端口:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-select v-model="form.dnc_protocol" :options="dncProtocolTypes" outlined dense  options-dense emit-value map-options style="width: 280px"
                    :rules="[val => val !== null && val !== '' && val !== undefined || '请选择传输协议']">
                <template v-slot:before>
                  <label class="text-right name label-width"><span class="text-red">*</span>传输协议:</label>
                </template>
                <!-- <template v-slot:append>
                  <q-icon name="close" @click.stop="form.dnc_protocol = ''" class="cursor-pointer" />
                </template> -->
              </q-select>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.dnc_username"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[]"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span>用户名:</span>
                  </label>
                </template>
              </q-input>
            </div>
            <div class="col">
              <q-input v-model="form.dnc_password"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[]"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span>密码:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
          <div class="title">根目录设置</div>
          <div class="row">
            <div class="col">
              <q-input v-model="form.file_dev"
                       dense
                       emit-value
                       map-options
                       style="width: 280px"
                       :rules="[
                       val => val !== '' || '请输入传输根目录']"
                       outlined>
                <template v-slot:before>
                  <label class="text-right name label-width">
                    <span class="text-red">*</span> <span>传输根目录:</span>
                  </label>
                </template>
              </q-input>
            </div>
          </div>
        </div>
        <q-separator />
        <div class="dialog-footer text-center margin-t-10">
          <q-btn outline
                 label="取消"
                 color="primary"
                 class="q-mr-md"
                 type="reset" />
          <q-btn unelevated
                 label="确认"
                 v-throttle
                 :loading="submitting"
                 color="primary"
                 type="submit" />
        </div>
      </q-form>
    </basic-dialog>
  </div>
</template>

<script>
import BasicDialogMixin from 'src/components/common/basic-dialog/src/basic-dialog-mixin'
import {
  deviceUpdateCollectSet,
  deviceUpdateEthDriveSet,
  ethDriveSets,
  subDeviceCollectSets
} from '../../../../../boot/miot/list'

export default {
  name: 'network-port-config',
  mixins: [BasicDialogMixin],
  computed: {
  },
  props: {
    deviceId: {
      type: [String, Object],
      default: null
    },
    deviceNum: {
      type: [String, Object],
      default: null
    },
    formData: {
      type: Object,
      default: null
    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler: function (val) {
        if (val) {
          this.form = val
        }
      }
    },
    deviceNum: {
      deep: true,
      immediate: true,
      handler: async function (val) {
        if (val) {
          try {
            const deviceNum = typeof val === 'object' ? val.deviceNum : val
            const deviceCollect = await subDeviceCollectSets(deviceNum)
            const { data } = await ethDriveSets(deviceNum)
            const deviceCollectData = deviceCollect.data
            if (data) {
              this.form.collect_cycle = deviceCollectData.collect_cycle
              this.form.collect_interval = deviceCollectData.collect_interval
              this.form.collect_ip = data.collect_ip
              this.form.collect_port = data.collect_port
              this.form.file_ip = data.file_ip
              this.form.file_port = data.file_port
              this.form.file_protocol = deviceCollectData.file_protocol
              this.form.file_dev = deviceCollectData.file_dev
              this.form.file_box = deviceCollectData.file_box
              this.form.file_username = data.file_username
              this.form.file_password = data.file_password
              this.form.dnc_port = data.dnc_port
              this.form.dnc_protocol = deviceCollectData.dnc_protocol
              this.form.dnc_username = data.dnc_username
              this.form.dnc_passworld = data.dnc_passworld
            }
          } catch (e) {
          }
        }
      }
    }
  },
  data () {
    return {
      fileProtocolTypes: [
        {
          label: 'FTP客户端',
          value: 0
        },
        // {
        //   label: 'FTP服务器端',
        //   value: 1
        // },
        {
          label: 'Samba客户端',
          value: 2
        },
        {
          label: 'SSH客户端',
          value: 4
        },
        {
          label: '厂家私有协议',
          value: 11
        }
      ],
      dncProtocolTypes: [
        {
          label: 'FTP客户端',
          value: 0
        },
        {
          label: 'FTP服务器端',
          value: 1
        },
        {
          label: 'Samba客户端',
          value: 2
        },
        {
          label: 'Samba服务器端',
          value: 3
        },
        {
          label: 'SSH客户端',
          value: 4
        },
        {
          label: '厂家私有协议',
          value: 11
        }
      ],
      submitting: false,
      form: {
        dnc_port: '',
        dnc_protocol: '',
        dnc_username: '',
        dnc_passworld: '',
        collect_cycle: '',
        collect_interval: '',
        collect_ip: '',
        collect_port: null,
        file_ip: '',
        file_port: null,
        file_dev: '',
        file_box: '',
        file_protocol: '',
        file_username: '',
        file_password: ''
      },
      // 设备地址
      deviceAddrOptions: []
    }
  },
  mounted () {
  },
  methods: {
    // 提交表单
    onSubmit () {
      this.submitData()
    },
    // 保存数据
    async submitData () {
      const params2 = {
        deviceId: this.deviceNum || this.deviceId,
        boxId: this.$route.query.boxId,
        collect_ip: this.form.collect_ip,
        collect_port: this.form.collect_port,
        file_ip: this.form.file_ip,
        file_port: this.form.file_port,
        file_box: this.form.file_box,
        file_username: this.form.file_username || '',
        file_password: this.form.file_password || '',
        dnc_port: this.form.dnc_port,
        dnc_username: this.form.dnc_username || '',
        dnc_password: this.form.dnc_password || ''
      }

      this.submitting = true
      Promise.all([deviceUpdateCollectSet(this.form.collect_cycle, this.form.collect_interval, this.deviceNum || this.deviceId, this.form.dnc_protocol, this.form.file_dev, this.form.file_box, this.form.file_protocol), deviceUpdateEthDriveSet(params2)]).then(res => {
        if (res[0].result_code === 0 && res[1].result_code === 0) {
          this.$emit('configSuccess', this.form)
        } else {
          this.$message.error('配置失败')
        }
      }).catch(() => {
        this.$message.error('配置失败')
      })
        .finally(() => {
          this.submitting = false
        })
    }
  }
}
</script>

<style scoped lang="stylus">
  .label-width
    width 120px
  .title
    line-height 1
    font-weight 500
    font-size 16px
    color $primary
    margin-bottom 20px
</style>
